<template>
 <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
   <el-form :model="ruleForm"  label-width="80px">
   <el-form-item label="角色名称"> 
      <el-input v-model="ruleForm.name" placeholder="Please input"></el-input>
   </el-form-item>
   <el-form-item label="权限"> 
    <el-tree
    node-key="id"

    ref="treeRef"
 
    @check="handleCheck"
    style="max-width: 600px"
    :data="data"
    show-checkbox
    :current-node-key="currentNodeKey"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
   </el-form-item>
   </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref,defineProps,defineEmits, nextTick } from 'vue'
import { ElMessageBox } from 'element-plus'
import { IRole, MenuItem } from '@/apis/administrator/type';
import { addRole, getMenuIdByRoleId, getPermissionList } from '@/apis/administrator/administrator';

const emit = defineEmits(['reload'])

const props= withDefaults(defineProps<{data:IRole}>(), {
    data:()=>({
        id:0,name:'',
    })
})

const currentNodeKey=ref([72,73]);
const dialogVisible = defineModel<boolean>();

const treeRef=ref();





//定义表单数据
const ruleForm = reactive<IRole>({
    id: props.data.id,
    name: props.data.name,
    menus: []
})

const handleClose = (done: () => void) => {

    dialogVisible.value=false;
   
}

interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}
//获取权限数据
const getMenus = async () => {
  const res = await getPermissionList()
  console.log(res.data.list)
  data.value = res.data.list;

  if(!ruleForm.id) return;

 

  //获取某个角色拥有的权限
   const roleRes:any=await  getMenuIdByRoleId(ruleForm.id);

   console.log("roleRes",roleRes.data);

   ruleForm.menus=roleRes.data.map((item:any)=>({id:item.menuid}))
   
  
  nextTick(() => {
    treeRef.value.setCheckedKeys(roleRes.data.map((item:any)=>item.menuid));
  })


}

const data = ref<MenuItem[]>([])

getMenus();

const defaultProps = {
  label: 'name',
}
// const checkIds=ref<number[]>([])
// //点击复选框
// const handleCheckChange = (data: MenuItem, isChecked: any) => {
 
//     //选中
//     if(isChecked){
        
//         ruleForm.menus?.push({id:data.id})
 
//     }
//     else{
//         ruleForm.menus= ruleForm.menus?.filter(item=>item.id!==data.id) as MenuItem[]
//     }
 
// }

const handleCheck=(data: MenuItem, checked: any)=>{

    // console.log(data);
    console.log(checked.checkedKeys);

    ruleForm.menus=checked.checkedKeys.map((item:number)=>({id:item}))

}

const submit = async () => {
  const res = await addRole(ruleForm);
  console.log("提交结果",res);

  dialogVisible.value=false;

  //
  emit("reload");


 
  
  
}
</script>
<style scoped lang='less'>
</style>